<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 作用域插槽</title>
<script src="./vue.js"></script>
</head>
<body>
 
<div id="example">
      <parent-com></parent-com>
</div>
    <script>
   Vue.component('child-com',{
        template:`
        <ul>
           <slot name="child-ul" v-for="item in animal" :text="item.name"></slot>'
        </ul>
        `,
        data:function(){
            return {
                animal:[
                    {name:'大象'},
                    {name:'小狗'},
                    {name:'小猫'},
                    {name:'老虎'}
                ]
            }
        }
    });
    //父组件
    // 在父组件的模板里，使用一个Vue自带的特殊组件<template> ，
    // 并在该组件上使用scope属性，值是由子组件传递过来的
    // prop对象，在下面的例子中我把他命名为props。
    //  获得由子传过来的prop对象。这时候，父组件就可以访问子组件在自定义属性上暴露的数据了。
    Vue.component('parent-com',{
        template:'' +
        '<div class="container">' +
        '<p>动物列表</p>' +
        '<child-com>' +
        '   <template scope="props" slot="child-ul">' + /* 为slot的name属性 */
        '       <li class="child-ul">{{ props.text }}</li>' +
        '   </template>' +
        '</child-com>' +
        '</div>'
    });
 
// 创建根实例
new Vue({
 el: '#example',
 
})
</script>
</body>
</html>